<style lang="less">
    @import './listener-selector.less';
</style>

<template>
    <Modal v-model="vshow"  @on-ok="onOk" width="800px" @on-visible-change="onHide">
		<Spin fix v-if="spinShow">
			<Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
			<div>Loading</div>
		</Spin>
		<div slot="header">
			<span class="group-header">{{0==type?"选择用户":"选择倾听者"}}</span>
		</div>
		
		<Row :gutter="16">
			<Col span="8">
				<Input v-model="key" clearable>
					<Select v-model="filterKey" slot="prepend" style="width: 80px">
						<Option v-for="item in keyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</Input>
			</Col>
			<Col span="8">
				<Button type="primary" @click.native="search">搜索</Button>
				<Button type="info" @click.native="init"><Icon type="md-refresh" :size="16"/></Button>
			</Col>
		</Row>
		<div class="cleaner10"></div>
        <Table ref="vTable" @on-current-change="onSelectedRow" highlight-row :loading="spinShow" border stripe :columns="columns" :data="vData.data"></Table>
        <div class="cleaner10"></div>
        <Page @on-page-size-change="changePageSize" @on-change="changePage" :total="vData.total" :page-size="vData.pageSize" :current.sync="vData.page" :transfer="true" show-elevator show-sizer></Page>
    </Modal>
</template>

<script>
import {Table, Row, Col, Modal, Spin, Icon } from 'iview';

import {mapState,mapGetters} from 'vuex'
export default {
    name: 'ListenerSelector',
    components: {
       Table, Row, Col, Modal, Spin, Icon
    },
    props: {
        show: {
            type: Boolean
        },
		type:{type: Number,default:null}
    },
    data(){
        return {
			spinShow:true,
			realname:null,
			filterKey:'',
			key:'',
			keyList: [
				{value: 'realname',label: '真实姓名'},
				{value: 'nickname',label: '昵称'},
				{value: 'idno',label: '会员号'},
				{value: 'mobile',label: '手机号'},
			],
            selectedObj:{},
			vData:{page:0,pageSize:18},
			columns:[
				{title: '会员号',key: 'idno',width: 90,fixed: 'left'},
				{title: '真实姓名',key: 'realname'},
				{title: '昵称',key: 'nickname'},
				{title: '状态',key: 'status',
					render: (h, params) => {
						let _status=['暂存','激活','禁用','删除']
						return h('div',[
							h('span', {
							class: 1==params.row.status?'success':(2==params.row.status?'warning':(3==params.row.status?'error':'draft')),
						}, _status[params.row.status]),
						])
					}
				},
				{title: '排序',key: 'sequence', sortable: true},
				{title: '类型',key: 'type',
					render: (h, params) => {
						
						let _status=['普通会员','实习倾听者','倾听者','咨询师']
						return h('div',[
							h('span', {
							class: '',
						}, _status[params.row.type]),
						])
					}
				},
				{title: '服务状态',key: 'service_status',
					render: (h, params) => {
						return h('div',[
							h('span', {
								class: 1==params.row.service_status?'primary':'draft',
								style:{
									display:0==this.type?"none":"inline-block"
								}
							}, 1==params.row.service_status?'可接单':'休息中'),
						])
					}
				},

            ]
        }
    },
	methods:{
        init:function(){
            let self=this
            self.spinShow=true
            self.$refs.vTable.clearCurrentRow()
            function action1(){return self.$http.get("/v1/welisten/listeners",{params: { 'token': self.token,'type':self.type }})}
			
			self.$http.all([action1()])
			.then(self.$http.spread(function (response1){
				if(200==response1.data.status && 0==response1.data.code)
				{
                    self.vData=response1.data

				}else{self.$Message.error(response1.data.message)}

				self.spinShow=false


			})).catch(self.$http.spread(function (error1) { 
				self.$Message.error(error1)
				self.spinShow=false
			}))


			
        },
        onSelectedRow:function(currentRow,oldCurrentRow){this.selectedObj=currentRow},
        onOk:function(){
            this.$emit("on-change",this.selectedObj)
		},
        onHide:function(val){
            if (!val){
                this.$emit("on-hide",false)
            }
        },
		changePage:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/welisten/listeners",{params: { 'token': self.token, page:self.vData.page, pageSize: self.vData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey},'type':self.type}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.vData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info(error.message);
				self.tableLoading=false
			})
		},
		changePageSize:function(val){
			let self=this
			self.vData.pageSize=val
			self.tableLoading=true
			self.$http.get("/v1/welisten/listeners",{params: { 'token': self.token, page:1, pageSize: self.vData.pageSize,'type':self.type}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.vData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})
		},
    },
    mounted(){
        // this.init()
    },
	activated:function(){
		this.init()
	},
	computed:{
		...mapGetters(['token','menuIndex']),
		vshow:{
            get () {
                return this.show
            },
            set (val) {
                // this.show=val
            }
		},
	},
};
</script>

